<template>
	<div class="tableTool" :style="{ top: filterToolTop + 10 + 'px', left: filterToolLeft + 'px' }">
		<!-- <el-input
			v-model="keyword"
			prefix-icon="el-input__icon el-icon-search"
			type="text"
			placeholder="搜索"
			@input="seachKey"
			oninput="if(value.length>11)value=value.slice(0,100)"
		>
		</el-input> -->
		<el-input
			v-model="keyword"
			placeholder="搜索"
			@input="seachKey"
			oninput="if(value.length>11)value=value.slice(0,100)"
		>
			<template #suffix>
				<el-icon class="el-input__icon"><Search /></el-icon>
			</template>
		</el-input>
		<div class="select-box">
			<el-checkbox
				:indeterminate="isIndeterminate"
				v-model="checkAll"
				@change="handleCheckAllChange"
				id="checkAll"
				>全选</el-checkbox
			>
			<el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="(item, index) in options" :label="item" :key="index"> </el-checkbox>
			</el-checkbox-group>
		</div>
		<div class="bottom">
			<el-button size="mini" @click="$emit('closeTool')">取消</el-button>
			<el-button type="primary" size="mini" @click="save">确认</el-button>
		</div>
		<i class="el-icon-caret-top"></i>
	</div>
</template>
<script>
import { Search } from '@element-plus/icons-vue';
export default {
	name: 'tableCol',
	props: {
		filterToolLeft: {
			required: true,
			type: Number,
		},
		filterToolTop: {
			required: true,
			type: Number,
		},
		// 已经选中的数据
		seachData: {
			required: true,
			type: Object,
		},
		// 正在更改哪个
		seachType: {
			required: true,
			type: String,
		},
		// 需要后端给的所有数据
		allOptionsObj: {
			required: true,
			type: Object,
		},
		useTableToolComponent: {
			default: null,
		},
	},
	data() {
		return {
			keyword: '',
			checkAll: false,
			checkedList: [],
			options: [],
			isIndeterminate: true,
			allOptions: [],
		};
	},
	methods: {
		handleCheckAllChange(val) {
			console.log('val--', val);
			this.checkedList = val ? this.allOptions : [];
			this.isIndeterminate = false;
		},
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.options.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
		},
		save() {
			this.seachData[this.seachType] = this.checkedList;
			//  把查询条件给父组件
			this.$emit('saveSeach', this.seachData);
		},
		seachKey() {
			this.allOptions = this.allOptionsObj[this.seachType].filter((item) => item.indexOf(this.keyword) != -1);
			this.options = this.allOptions;
			this.checkedList = [];
			this.checkAll = false;
		},
		setposition() {
			let boxEl = document.querySelector('.tableTool');
			let icon = document.querySelector('.tableTool .el-icon-caret-top');
			if (this.filterToolLeft + boxEl.offsetWidth + 48 > document.body.clientWidth) {
				boxEl.style.transform = 'translateX(-90%)';
				icon.style.left = '90%';
			}
		},
	},
	created() {},
	async mounted() {
		this.allOptions = this.allOptionsObj[this.seachType];
		this.options = this.allOptions;
		// document.querySelector('#checkAll').click();
		this.setposition();
		console.log('mounted--');
		this.handleCheckAllChange(true);
		this.checkAll = true;
	},
	beforeMount() {
		let that = this;
		this._close = (e) => {
			let isFlag = that.$el.contains(e.target) || e.target.className.indexOf('el-icon-caret-bottom') != -1;
			if (!isFlag) {
				that.$emit('closeTool');
			}
		};
		document.body.addEventListener('click', this._close);

		console.log('beforeMount');
	},
	beforeDestroy() {
		document.body.removeEventListener('click', this._close);
	},
};
</script>

<style scoped>
.tableTool {
	position: fixed;
	background: #fff;
	box-shadow: 0 0 5px #ccc;
	padding: 10px;
	z-index: 999;
}
/* .tableTool :deep(.el-input__inner) {
	padding-left: 30px;
} */
.tableTool .select-box {
	border: #ccc solid 1px;
	padding: 10px;
	margin-top: 10px;
	max-height: 280px;
	overflow: auto;
	max-width: 400px;
}
.tableTool :deep(.el-checkbox) {
	display: block;
	margin-top: 5px;
}
.tableTool .bottom {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}
.tableTool .el-icon-caret-top {
	position: absolute;
	color: #fff;
	top: -10px;
}
</style>
